<template>
	<div class="login">
		<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form" @keydown.enter.capture="handleVerify">
			<h3 class="title">智慧综合监控平台</h3>
			<el-form-item prop="username">
				<el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
					<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
				</el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="密码" show-password>
					<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
				</el-input>
			</el-form-item>
			<el-form-item style="width: 100%">
				<el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleVerify">
					<span v-if="!loading">登 录</span>
					<span v-else>登 录 中...</span>
				</el-button>
				<div v-if="register" style="float: right">
					<router-link class="link-type" :to="'/register'">立即注册</router-link>
				</div>
			</el-form-item>
		</el-form>
		<!--  底部  -->
		<div class="el-login-footer">
			<!-- <span>广州源典科技有限公司版权所有 © 2018-2022</span> -->
		</div>
		<Verify ref="verifyRef" :mode="'pop'" :captcha-type="'blockPuzzle'" :img-size="{ width: '330px', height: '155px' }" @success="verifySuccess" />
	</div>
</template>

<script setup lang="ts">
import useUserStore from '@/store/modules/userinfo';
import useCurrentInstance from '@/utils/useCurrentInstance';
import { ref, getCurrentInstance, defineAsyncComponent } from 'vue';
import { useRouter } from 'vue-router';

// 动态加载滑块验证码组件
const Verify = defineAsyncComponent(() => import('@/components/Verifition/Verify.vue'));

const userStore = useUserStore();
const router = useRouter();
const { proxy } = useCurrentInstance();

interface loginFormType {
	username: string;
	password: string;
	code: string;
	randomStr: string;
}

const loginForm = ref<loginFormType>({
	username: '',
	password: '',
	code: '',
	randomStr: 'blockPuzzle',
});

const loginRules = {
	username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
	password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
};

const loginRef = ref();
const verifyRef = ref();
const refreshTime = ref();

const codeUrl = ref('');
const loading = ref(false);
// 验证码开关
const captchaEnabled = ref(true);
// 注册开关
const register = ref(false);

console.log(router);

// 调用滑块验证码进行校验
const handleVerify = async () => {
	const valid = await loginRef.value.validate().catch((err: any) => {
		console.log('err', err);
	}); // 表单校验
	if (valid) {
		verifyRef.value.show(); // 显示验证组件
	}
};

// 滑块验证码校验成功调用后台登录接口
const verifySuccess = (params: any) => {
	loginForm.value.code = params.captchaVerification; // 获取验证码
	console.log(loginForm.value);
	handleLogin(); // 调用登录方法
};

function handleLogin() {
	userStore.loginByUsername(loginForm.value).then(() => {
		proxy.$message.success('登录成功');
		router.push('/');
	});
}

// function getCookie() {
// 	const username = Cookies.get('username');
// 	const password = Cookies.get('password');
// 	const rememberMe = Cookies.get('rememberMe');
// 	loginForm.value = {
// 		username: username === undefined ? loginForm.value.username : username,
// 		password: password === undefined ? loginForm.value.password : decrypt(password),
// 		rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
// 		uuid: '',
// 		code: '',
// 	};
// }

// getCode();
// getCookie();
</script>

<style lang="scss" scoped>
:deep(.el-input__inner) {
	color: var(--el-text-color-black);
}

.login {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-image: url('@/assets/images/login-background.png');
	background-size: cover;
}
.title {
	margin: 0px auto 30px auto;
	text-align: center;
	color: #707070;
}

.login-form {
	border-radius: 6px;
	background: #ffffff;
	width: 400px;
	padding: 25px 25px 5px 25px;
	.el-input {
		height: 40px;
		input {
			height: 40px;
		}
	}
	.input-icon {
		height: 39px;
		width: 14px;
		margin-left: 0px;
	}
}
.login-tip {
	font-size: 13px;
	text-align: center;
	color: #bfbfbf;
}
.login-code {
	width: 33%;
	height: 40px;
	float: right;
	img {
		cursor: pointer;
		vertical-align: middle;
	}
}
.el-login-footer {
	height: 40px;
	line-height: 40px;
	position: fixed;
	bottom: 0;
	width: 100%;
	text-align: center;
	color: #fff;
	font-family: Arial;
	font-size: 12px;
	letter-spacing: 1px;
}
.login-code-img {
	height: 40px;
	padding-left: 12px;
}
</style>
